<div class="modal-header">
    <h1>{{'select_widgets_to_show'| translate}}</h1>
</div>

<div class="modal-body">
    <div class="scroll">
        <table class="listTable dhis2-table-striped-border">
            <tr ng-repeat="widget in dashboardWidgets | orderBy: 'title'">
                <td ng-click="widget.show = !widget.show">
                    {{widget.title| translate}}
                </td>
                <td>
                    <input type="checkbox" ng-model="widget.show" ng-change="closeOpenWidget(widget)">
                </td>
                <td>
                    
                    <span ng-if="defaultDashboardWidgetsByTitle[widget.title].canBeUsedAsTopBar">
                        <div ng-style="{display: 'flex', 'align-items': 'center'}">
                            <div>
                                <input type="checkbox" ng-model="widget.useAsTopBar" ng-change="setUseAsTopBar(widget)"/>
                            </div>
                            <div ng-style="{'margin-left': '4px'}">
                                {{'use_as_top_bar'| translate}}
                            </div>
                        </div>
                    </span>
                </td>
            </tr>
        </table>
    </div>        
</div>

<div class="modal-footer">     
    <button type="button" class="btn btn-default" data-ng-click="close()">{{'close'| translate}}</button>
</div>